<template>
  <!-- footer组件 -->
  <footer class="todo-footer" v-if="list.length">
    <input type="checkbox" :checked="isAllCheck" @change="toggleAll"/>
    <div>已办事项: {{ countFinished }} / 全部事项 {{ countAll }}</div>
    <button @click="clearFinished">清除已办</button>
    <button @click="clearAll">清除所有</button>
  </footer>
  <h2 class="todo-empty" v-else>没有待办事项</h2>
</template>

<script setup>
import { computed } from 'vue'
// 接收props
const props = defineProps({
  // 类型校验
  list: {
    type: Array,
    required: true,
    default: () => [],
  },
})
// 得到emit方法
const emit = defineEmits(['toggle-All','clear-Finished','clear-All'])
/* ============================= */
// 每一项是否选中控制全选框的方法
// 数组每一项的isAny为true才返回true
const isAllCheck = computed(() => props.list.every(item => item.isAny))
// 全选框控制每一项选中的方法
// 子传父,通知父组件改变每一项的状态
const toggleAll = (e)=>{
  // 传递选中状态的布尔值
  emit('toggle-All',e.target.checked)
}
/* ===================== */
// 统计已办事项的方法
const countFinished = computed(()=>props.list.filter(item=>item.isAny).length)
// 定义统计全部事项的方法
const countAll = computed(() => props.list.length)
/* ===================== */
// 定义清除已办的方法
const clearFinished = ()=>{
  // 子传父
  emit('clear-Finished',)
}
// 定义清除所有的方法
const clearAll = ()=>{
  emit('clear-All')
}
</script>
<style scoped>
/* footer样式 */
.todo-footer {
  margin-top: 20px;
  background-color: rgb(142, 242, 150);
  display: flex;
  padding: 10px 40px;
}
.todo-footer div {
  flex: 1;
  margin-left: 10px;
}
.todo-footer button {
  margin-left: 10px;
  padding: 0 10px;
}
.todo-empty {
  margin-top: 20px;
  text-align: center;
}
</style>
